import React, { Component } from "react";
// 组件
import { Toast } from "antd-mobile";

import MainLayout from "@component/mainLayout/mainLayout";
import Button from "@component/button/index";
import "./noAccount.scss";

import yhTools from "@tools/yh";
import { InterfaceG, agreements_url } from "@config/Config";
import xhb_option1 from '@images/imageXHB/icon_01@2x.png';
import xhb_option2 from '@images/imageXHB/icon_02@2x.png';
import xhb_option3 from '@images/imageXHB/icon_03@2x.png';


/**
 * 描述：小辉宝-余额-未开户
 * 作者：zenghq
 * 日期：2021-03-10
 */
class noAccount extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	/*******************生命周期 start************************/
	componentDidMount() {
		//小辉宝新开户的用户，白名单内，走新的小辉宝首页
		sessionStorage.setItem('isXhbWhite', 1);  //1: 新开户的用户，都是xhb白名单内的
	}
	componentWillUnmount() { }
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	balanceOpenElectronicAccount() {
		let objs = {
			url: InterfaceG.balanceOpenElectronicAccount,
			params: {}
		};
		return yhTools.request(objs);
	}
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	// 永辉金融隐私政策
	goPolicy = () => {
		this.props.history.push({
			pathname: "/iframeAgreements",
			state: {
				src: agreements_url + "/privacyAgreement.html",
				title: "永辉金融隐私政策"
			}
		});
	};
	// 永辉金融用户协议
	goAgreement = () => {
		this.props.history.push({
			pathname: "/ServiceAgreementAuthorization"
		});
	};
	/**
	 * 立即开通
	 */
	async openClick() {
		const resp = await this.balanceOpenElectronicAccount();
		const { code, data, message } = resp;
		if (code == "0") {
			const { isUnOpen, userName, idNo, mobilePhone, signDate } = data;
			if (isUnOpen) {
				// 开过户
				// 去通户
				this.props.history.push({
					pathname: `/identityVerification`,
					state: { userName, idNo, mobilePhone, signDate }
				});
			} else {
				// 未开户
				this.props.history.push({
					pathname: `/uploadIDCardImgPage`
				});
			}
		} else {
			message && Toast.info(message, 2);
		}
	}
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const _pageParams = {
			header: {
				title: "小辉宝",
				headerBackground: '#F9F4EC',
				newBackButt: true,
				titleColor: '#302E2F',
				goToApp: true
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="ballance_no_account-content">
					{/* 顶部 */}
					<p className="title-1">小辉宝 让您的钱包会赚钱</p>
					<p className="title-2">存款安心有保障 · 双重福利限时享</p>
					<div className="info-card">
						<div className="card-left">
							<img className="bg" src="https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_noSign_left_banner.png" alt="" />
						</div>
						<div className="card-right">
							<img className="bg" src="https://jrcdn.yonghui.cn/yh_supermarket_sdk/yhLife/xhb/xhb_noSign_right_banner.gif" alt="" />
							<div className="tag">限时</div>
						</div>
					</div>
					<div className="options">
						<div className="item">
							<img src={xhb_option1} alt="" />
							<span className="item-a">零钱打理</span>
							<span className="item-c">收益享不停</span>
						</div>
						<div className="item">
							<img src={xhb_option2} alt="" />
							<span className="item-a">随时可用</span>
							<span className="item-c">能花又能取</span>
						</div>
						<div className="item">
							<img src={xhb_option3} alt="" />
							<span className="item-a">银行账户</span>
							<span className="item-c">安全有保障</span>
						</div>
					</div>
					{/* 底部 */}
					<section className="footer-box">
						<div className="text mt20 text-c">点击按钮，表示您已阅读并同意</div>
						<div className="agreement-text text-c">
							<span onClick={this.goPolicy}>《永辉金融隐私政策》</span>
							<span onClick={this.goAgreement}>《永辉金融用户协议》</span>
						</div>
						<Button
							onClick={this.openClick.bind(this)}
							className="button"
							btnClassName="balance-button"
							buttonStyle={{ background: 'linear-gradient(90deg, #E0B174 0%, #C89553 100%)' }}
						>
							立即开通电子账户
						</Button>
					</section>
				</div>
			</MainLayout>
		);
	}
}

export default noAccount;
